@import 'colors';
@import 'icons/style';

.cal-md,
.cal-hd,
.cal-title,
.cal-prev,
.cal-next,
.cal-bd,
.cal-week,
.cal-day,
.cal-dates,
.cal-date,
.cal-months,
.cal-month,
.cal-years,
.cal-year,
.cal-ft,
.cal-today {
  margin: 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.cal-hd,
.cal-ft {
  box-sizing: border-box;
  height: calc(100% / 9);
}

.cal-prev,
.cal-next,
.cal-date,
.cal-day,
.cal-month,
.cal-year {
  text-align: center;
}

.cal-prev,
.cal-next,
.cal-year,
.cal-month,
.cal-date,
.cal-day {
  float: left;
}

.cal-title,
.cal-prev,
.cal-next,
.cal-year,
.cal-month,
.cal-date,
.cal-today,
.cal-time {
  cursor: pointer;
}

.cal-md {
  background-color: $white;
  font-size: 14px;
  user-select: none;
  width: 100%;
}

.cal-md,
.cal-switcher,
.cal-title,
.cal-prev,
.cal-next,
.cal-day,
.cal-today,
.cal-time,
.cal-months,
.cal-years,
.cal-ft-date,
.cal-ft-time {
  height: 100%;
}

.cal-bd {
  height: calc((100% / 9) * 7);
}

.cal-week {
  height: calc(100% / 7);
}

.cal-dates {
  height: calc((100% / 7) * 6);
}

.cal-day,
.cal-date {
  width: calc(100% / 7);
}

.cal-date {
  height: calc(100% / 6);
}

.cal-month,
.cal-year {
  height: 25%;
  width: 25%;
}

.cal-md-without-footer {
  .cal-bd {
    height: calc((100% / 8) * 7);
  }
}

.cal-title,
.cal-prev,
.cal-next,
.cal-day,
.cal-date,
.cal-month,
.cal-year,
.cal-today,
.cal-time {
  display: table;
}

.cal-text {
  display: table-cell;
  vertical-align: middle;
}

.cal-festival-text,
.cal-lunar-text {
  bottom: 0;
  color: $light-gray;
  font-size: 12px;
  margin: 0;
  padding: 5px;
  position: absolute;
  right: 0;
  z-index: 2;
}

.cal-festival-text {
  color: $green;
}

.cal-hd {
  border-bottom: 1px solid $border-color;
}

.cal-title {
  color: $gray;
  font: normal 16px 'Arial', sans-serif;
  margin-right: 60px;
  padding-left: 10px;

  &:hover {
    color: $blue;
  }
}

.cal-switcher {
  font-size: 22px;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  width: 60px;
  z-index: 2;
}

.cal-prev,
.cal-next {
  color: $light-gray;
  width: 30px;

  &:hover {
    background-color: $background-color-hover;
    color: $gray;
  }
}

.cal-year,
.cal-month,
.cal-date {
  color: $light-black;

  &:hover {
    background-color: $background-color-hover;
    color: $black;
  }
}

.cal-year-prev,
.cal-year-next,
.cal-month-prev,
.cal-month-next,
.cal-date-prev,
.cal-date-next {
  background-color: $background-color;
  color: $light-gray;

  &:hover {
    background-color: $background-color-hover;
    color: $gray;
  }
}

.cal-weekend {
  color: $dark-red;

  .cal-lunar-text {
    color: $dark-red;
  }

  &:hover {
    color: $dark-red;
  }
}

.cal-picked {
  background-color: $primary;
  color: $white;
  font-weight: bold;

  &:hover {
    background-color: $primary;
    color: $white;
  }

  .cal-festival-text,
  .cal-lunar-text {
    color: $white;
  }

  &.cal-current {
    background-color: $light-grass;

    &:hover {
      background-color: $light-grass;
    }

    .cal-festival-text,
    .cal-lunar-text {
      color: $white;
    }
  }
}

.cal-picked-range {
  background-color: $light-blue;
  color: $primary;
  font-weight: normal;

  &:hover {
    background-color: $light-blue;
    color: $primary;
  }
}

.cal-current {
  background-color: $green;
  color: $white;

  &:hover {
    background-color: $green;
    color: $white;
  }

  .cal-festival-text,
  .cal-lunar-text {
    color: $white;
  }
}

.cal-ft {
  border-top: 1px solid $border-color;
  font-size: 13px;
}

.cal-ft-date {
  margin-right: 70px;
  text-align: center;
}

.cal-ft-time {
  margin: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 70px;
  z-index: 2;
}

.cal-today,
.cal-time {
  text-align: center;

  &:hover {
    color: $primary;
  }
}

.cal-hidden {
  display: none;
}
